import React, { Component } from 'react'
//引入action
import {
	increment,
	decrement,
	incrementAsync
} from '../../redux/actions/count'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'


//定义UI组件
class Count extends Component {

	state = {carName:'奔驰c63'}

	//加法
	increment = ()=>{
		const {value} = this.selectNumber
        //todo 调用redux传给自己的action
        this.props.increment(value*1)
	}
	//减法
	decrement = ()=>{
		const {value} = this.selectNumber
		this.props.decrement(value*1)
	}
	//奇数再加
	incrementIfOdd = ()=>{
		const {value} = this.selectNumber
		if(this.props.count % 2 !== 0){
			this.props.increment(value*1)
		}
	}
	//异步加
	incrementAsync = ()=>{
		const {value} = this.selectNumber
		this.props.incrementAsync(value*1,500)
	}

	render() {
		//console.log('UI组件接收到的props是',this.props);
		return (
			<div>
				<h2>我是Count组件,下方组件总人数为:{this.props.renshu}</h2>
				<h4>当前求和为：{this.props.count}</h4>
				<select ref={c => this.selectNumber = c}>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>&nbsp;
				<button onClick={this.increment}>+</button>&nbsp;
				<button onClick={this.decrement}>-</button>&nbsp;
				<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
				<button onClick={this.incrementAsync}>异步加</button>&nbsp;
			</div>
		)
	}
}

//connect()()创建并暴露一个Count的容器组件
//fixme state数据来源于reducer更新的state 但是此文件不需要引入reducer
//fixme  state在store里存储 入口文件<Provider store={store}> 已经传过来了 但是下面的action需要引入
//fixme state.count来源于reducers/index.js的count对应的函数返回值 赋值给count render里this.props.xxx这样使用
export default connect(
	state => ({                                 //todo 这个state是redux的state 与本组件的state无关
		count:state.count,
		personCount:state.persons.length	//来源于reducers/index.js  的persons
	}),
	{increment,decrement,incrementAsync}   //来源于actions/count.js // export const increment = data => ({type:INCREMENT,data})
)(Count)

/*上面的原型是这样的：
*  原型：export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
*
  	mapStateToprops原型：
	function mapStateToProps(state){
		return {count:state}
	}   简写成state => ({count:state}),  箭头函数返回一个对象 去掉{} 并加小括号
*
*  //mapDispatchToProps原型：
	/*
		原写法： jia: ()=>{}  将()=>{} 赋值给jia
		jia:(number)=> {dispatch(createIncrementAction(number))}
		简写：()里只有一个参数，可以省略() {}里只有一条语句可以省略{}
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	mapDispatchToProps的再简写  参数和方法体都省了，dispatch都省了，只告诉调用哪个action  底层自动dispatch
		jia:createIncrementAction,
		jian:createDecrementAction,
		jiaAsync:createIncrementAsyncAction,
 注意： state => ({count:state})   ({ }) 里不能有多余空行
 */